'use strict';

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    devtool: "cheap-module-eval-source-map",
    // entry: ["./src/main.js", "./src/main.1.js"],
    entry: {
        one: "./src/main.js",
        two: "./src/main.1.js",
        index: "./src/js/index.js",
    },
    output: {
        path: path.resolve(__dirname, "../dist"),
        // filename: "bundle.js"
        filename: "js/[name].bundle.js"
    },
    plugins: [ // 插件
        new HtmlWebpackPlugin({
            title: 'hello',
            template: './src/template.html',
            filename: 'index.html',
            chunks: ['index', 'vender']
        }),
        // new HtmlWebpackPlugin({
        //     title: 'webpack1',
        //     template: './src/template.html',
        //     filename: 'index.html',
        //     inject: true,
        //     hash: true,
        //     chunks: ['one'],
        //     excludeChunks: ['two'],
        //     minify: {
        //         collapseWhitespace: true, // 压缩空格
        //         removeAttributeQuotes: true, // 移除引号
        //         removeComments: true, // 移除注释
        //     }
        // }),
        // new HtmlWebpackPlugin({
        //     title: 'webpack2',
        //     template: './src/template.html',
        //     filename: 'test2.html',
        //     chunks: ['two']
        // }),
        new CleanWebpackPlugin(), // 先删除再编译
        new webpack.HotModuleReplacementPlugin(), // 热加载
        new MiniCssExtractPlugin({
            filename: 'css/index.css', // 文件目录会放入output.path里
        }),
        new webpack.ProvidePlugin({ // 第三方库
            $: 'jquery',
            _: 'underscore'
        }),
    ],
    devServer: {
        host: 'localhost',   //服务器的ip地址
        port: 1574,  //端口
        open: false,  //自动打开页面
        hot: true, //开启热更新
    },
    module: {
        rules: [
            {
                test: /\.css$/, // 以点开始css结尾的文件
                // use: ['style-loader', 'css-loader'], // 顺序不能搞错
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../'
                        },
                    },
                    'css-loader'
                ], // 顺序不能搞错
            },
            {
                test: /\.less$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../'
                        }
                    },
                    'css-loader',
                    'less-loader',
                ]
            },
            {
                test: /\.(jpg|png|gif)$/,
                // use: ['file-loader'],
                use: [
                    {
                        loader: 'url-loader',    //把图片转成base64
                        options: {
                            limit: 50 * 1024,  //小于50k就会转成base64
                            outputPath: 'images'
                        }
                    }
                ],
            },
            {
                test: /\.(js|jsx)$/,
                use: [
                    {
                        loader:'babel-loader',
                        options: { //env针对的是ES的版本，它会自动选择。react针对的就是react
                            presets: ['env', 'react']
                        }
                    },
                ],
                // exclude: /node_modules/,
                include: path.resolve(__dirname, 'src/js'),
            },
        ]
    },
    optimization: { // 优化
        splitChunks: {
            cacheGroups: { //缓存组，一个对象。它的作用在于，可以对不同的文件做不同的处理
                commonjs: {
                    name: 'vender', //输出的名字（提出来的第三方库）
                    test: /\.js/, //通过条件找到要提取的文件
                    chunks: 'initial', //只对入口文件进行处理
                }
            }
        }
    }
}
